<!-- subpkg_archive/form/index.vue -->
<script setup lang="ts">
import { addPatientApi } from "@/apis/patient"
import { ref } from "vue"
// import { addPatientApi } from "@/apis/patient"

// 定义表单数据
const formData = ref({
  name: "",
  idCard: "",
  defaultFlag: 0, // 默认患者1    非默认0
  gender: 1, //  男1   女0
})
// 是否为默认就诊人
const onSwitchChange = (ev: UniHelper.SwitchOnChangeEvent) => {
  console.log(ev)
  // @ts-ignore
  formData.value.defaultFlag = ev.detail.value ? 0 : 1
}

// 增添表单判断规则
// 2. 表单验证规则
// 2. 表单验证规则
const formRules = {
  name: {
    rules: [
      { required: true, errorMessage: "请填写患者姓名" },
      {
        pattern: "^[\u4e00-\u9fa5]{2,5}$",
        errorMessage: "患者姓名为2-5位中文",
      },
    ],
  },

  idCard: {
    rules: [
      { required: true, errorMessage: "请输入身份证号" },
      {
        pattern:
          "^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$",
        errorMessage: "身份证号格式不正确",
      },
    ],
  },

  // 性别校验
  gender: {
    // 规则
    rules: [
      // 第一个规则: 必须和身份证号统一
      // 自定义校验
      {
        // 直接提供一个validateFunction函数
        validateFunction: function (rule, value, data, callback) {
          // 如果你想让这个结果通过  return true
          // 失败    callback('错误提示')
          // if (value.length < 2) {
          //   callback('请至少勾选两个兴趣爱好')
          // }
          // return true
          // rule 规则
          // value 当前选中的性别
          // data  整个bd数据
          // callback  失败时需要调用的函数
          // console.log(value, data)
          const g = data.idCard.slice(16, 17) // 倒数第二位 字符串
          if (Number(g) % 2 !== value) {
            callback("身份证性别和选中的性别不匹配")
          }
          return true
        },
      },
    ],
  },
}

// 提交表单数据 嗲用方法执行校验规则
const formRef = ref()
async function onFormSubmit() {
  try {
    await formRef.value.validate()

    await addPatientApi(formData.value)
    uni.showToast({
      title: "添加成功",
      icon: "none",
    })
    // 跳转到患者列表页面
    // 在C页面内 navigateBack，将返回A页面
    uni.navigateBack({
      delta: 2,
    })
  } catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms border :rules="formRules" label-width="220rpx" ref="formRef" :model="formData">
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            v-model="formData.name"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            v-model="formData.idCard"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            v-model="formData.gender"
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人">
          <view class="uni-switch">
            <switch
              :checked="formData.defaultFlag === 1"
              color="#20c6b2"
              style="transform: scale(0.7)"
              @change="onSwitchChange"
            />
          </view>
        </uni-forms-item>
        <button @click="onFormSubmit" class="uni-button">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import "./index.scss";
</style>
